<template>
    <div>
        <ModalComponent @open="handleOpen" modal-name="admission-ticket-info" title="准考证" :close-on-click-modal="false"
            size="960">
            <div class="admission-ticket-info-container" ref="admission_ticket">
                <el-watermark :content="watermark_content">
                    <div class="content-container">
                        <h3>WRC 2023 AI Will 综合素养参赛证</h3>
                        <table cellspacing="0">
                            <tr>
                                <td>姓名</td>
                                <td>{{ content.studentName }}</td>
                                <td>证件号码</td>
                                <td>{{ content.documentNumber }}</td>
                            </tr>
                            <tr>
                                <td>申报单位</td>
                                <td>{{ content.informationName }}</td>
                                <td>组别</td>
                                <td>{{ content.groupDescribe }}</td>
                            </tr>
                            <tr>
                                <td>考场名称</td>
                                <td>{{ content.examinationName }}</td>
                                <td>比赛时间</td>
                                <td>{{ content.playingTime }}</td>
                            </tr>
                            <tr>
                                <td>比赛网站</td>
                                <td>
                                    {{Host}}/exam
                                </td>
                                <td>比赛类型</td>
                                <td>
                                    {{ content.eventType }}
                                </td>
                            </tr>
                            <tr>
                                <td>账号/密码</td>
                                <td colspan="3">登录名：{{ content.examNumber }} 登录密码：{{ content.password }}</td>
                            </tr>
                        </table>
                        <!-- <div class="notes-container">
                    <el-text size="small">注意事项</el-text>
                </div> -->
                    </div>
                </el-watermark>
            </div>

            <div class="btns">
                <el-space>
                    <!-- <el-switch size="large" v-model="watermark">水印</el-switch> -->
                    <el-button type="primary" @click="handleExportImage" size="large">导出为图片</el-button>
                    <el-checkbox v-model="watermark" label="水印" size="large" />
                </el-space>
            </div>
        </ModalComponent>
    </div>
</template>
<script setup >
import { onMounted, reactive, ref, watch } from 'vue'
import ModalComponent from "@/components/modal/index.vue"
import html2canvas from 'html2canvas';
import { download } from "@/utils/downLoad"
import { getAdmissionTicket } from '@/api/gradingTeacher';

const watermark = ref(true)
const watermark_content = ref("WRC 2023 AI Will 综合素养参赛证")
const Host = import.meta.env.VITE_APP_HOST;

watch(
    watermark,
    () => {
        watermark_content.value = watermark.value
            ? 'WRC 2023 AI Will 综合素养参赛证'
            : ''
    },
    {
        immediate: true,
    }
)

const admission_ticket = ref();
const content = ref({});
const handleOpen = async (e) => {
    let res = await getAdmissionTicket({
        eventId: e.eventId,
        studentId: e.studentId,
    })
    if (res.success) {
        content.value = res.entity;
    }
}
const handleExportImage = () => {
    html2canvas(admission_ticket.value).then((canvas) => {
        const image = canvas.toDataURL('image/png');
        console.log(image)
        download(content.value.studentName + '-' + content.value.documentNumber + "-准考证.png", image, 'data')
    }).catch((err) => {
        console.log(err)
    })
}
onMounted(() => {
    console.log('mounted!')
})
</script>
<style lang="scss" scoped>
.admission-ticket-info-container {
    width: 100%;
    text-align: center;
    padding: 0px;
    box-sizing: border-box;

    .content-container {
        padding: 32px;
        box-sizing: border-box;
    }

    h3 {
        font-weight: bold;
        padding: 16px 0;
    }

    table {
        width: 100%;
        text-align: center;
        --border-color: #ccc;

        // border: 1px solid #ccc;
        tr {
            td:nth-child(1) {
                border-left: 1px solid var(--border-color);
            }
        }

        tr:nth-child(1) {
            td {
                border-top: 1px solid var(--border-color);
            }
        }

        td {
            border-right: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            min-width: 120px;
            height: 48px;
        }


    }

    .notes-container {
        text-align: left;
        padding-top: 8px;
    }
}

.btns {
    padding-top: 16px;
    display: flex;
    justify-content: center;
}
</style>